<%@page import="java.util.List" %>
<%@page import="java.util.ArrayList" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	<meta name="description" content="">
	<meta name="author" content="">
	<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">

	<title>TyEnWord</title>

	<!-- Bootstrap core CSS -->
	<link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
	<!-- Bootstrap theme -->
	<link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet">
	
	<link href="http://cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
	
	<!-- Custom styles for this template -->
	<link href="css/theme.css" rel="stylesheet">

	<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
	<script src="http://cdn.bootcss.com/scrollup/2.4.0/jquery.scrollUp.min.js"></script>
	<script src="js/question.js"></script>

	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
		<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
		<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
	<![endif]-->
</head>

<body role="document">
	<!-- Fixed navbar -->
<jsp:include page="nav.jsp" flush="true"></jsp:include>
	<div class="container theme-showcase" role="main">
		<div class="jumbotron">
			<h1 id="unit">Unit ${unit}</h1>
			<h2 id="book">${book.name}<small>${book.info}</small></h2>
		</div>
		<div id="result" class="panel panel-primary" style="display: none;">
			<div class="panel-heading">Result</div>
			<div class="panel-body">
				<div class="progress">
					<div id="success-count" class="progress-bar progress-bar-success progress-bar-striped active" style="width: 0%"></div>
					<div id="error-count" class="progress-bar progress-bar-danger progress-bar-striped active" style="width: 0%"></div>
					<div id="warning-count" class="progress-bar progress-bar-warning" style="width: 100%"></div>
				</div>
				<button id="show-all" type="button" class="btn btn-info">Show All Result</button>
			</div>
		</div>
		<div class="page-header"><h1>Tables</h1></div>
		<div class="row">
			<div class="col-md-12">
				<table id="questions" class="table table-bordered">
					<thead>
						<tr>
							<th>#</th>
							<th>Words</th>
							<th>Translation</th>
							<th class="answer" style="display:none">Answer</th>
						</tr>
					</thead>
					<tbody>
						<s:iterator value="vocabularyList" status="status">
							<tr attr="${elemType}-${id }">
								<td>${status.count }</td>
								<td>${val }</td>
								<td>
									<input type="text" class="form-control" />
								</td>
								<th class="answer">
									<button type="button" class="btn" data-container="body" data-toggle="popover" data-placement="top" data-content="" style="display:none">
										Show Answer
									</button>
								</th>
							</tr>
						</s:iterator>
					</tbody>
				</table>
			</div>
		</div>
		<button id="submit" type="button" class="btn btn-lg btn-primary">Submit</button>
	</div>
	<!-- /container -->
	<%@ include file="footer.jsp" %>